<template>
        <el-container class="home_container">
            <!-- 侧边栏 -->
            <el-aside :width="isCollapse ? '105px':'200px'" >

               <div class="avator">
                   <el-avatar :size="50" src="https://img1.baidu.com/it/u=23369769,88035424&fm=26&fmt=auto&gp=0.jpg"></el-avatar>
                   <span class="login_message">
                       <p class="avator_name">阿杰</p>
                        <p class="postion">技术总监<i class="el-icon-caret-bottom"></i></p>
                   </span>
               </div>
            
                <!-- 导航栏 -->
                <el-menu background-color="#545c64" text-color="#fff"  active-text-color="#409EFF"
                unique-opened :collapse="isCollapse" :collapse-transition="false" 
                :default-active="activePath"  router>
                    <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span>{{item.authName}}</span>
                        </template>
                        
                        <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" 
                        :key="subItem.id" @click="saveNavState('/'+subItem.path)">
                        <template slot="title">
                                <span>{{subItem.authName}}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            
            <el-container>
                <!-- 头部 -->
                <el-header >
                    <el-button type="success" icon="el-icon-s-operation" class="btn" @click="toggleCollapse"></el-button>
                    <div class="logout">
                        <p>欢迎来到壹号管家系统
                            <span @click="logout">
                                <i class="el-icon-switch-button"></i> 注销
                            </span>
                        </p> 
                    </div>
                </el-header>
                
                <!-- main -->
                <el-main>
                    <!-- 路由占位符 -->
                    <router-view></router-view>
                </el-main>
            </el-container>

        </el-container>
</template>

<script>

export default {
    data(){
        return{
            isCollapse: false,
            menulist:[
                {
                    id:0,authName:"权限管理",icon:"el-icon-setting",
                    children:[
                        {id:0,authName:"行为管理",path:"admin_permission_list"},
                        {id:1,authName:"角色管理",path:"admin_role_list"},
                        {id:2,authName:"账号管理",path:"admin_account_list"}]
                },
                {
                    id:1,authName:"会员维护",icon:"el-icon-star-off",
                    children:[{id:0,authName:"会员卡管理",path:"admin_vip_setting"},{id:1,authName:"会员管理",path:"admin_vip_list"}]
                },
                {
                    id:2,authName:"咨询维护",icon:"el-icon-chat-dot-round",
                    children:[{id:0,authName:"咨询管理",path:"admin_news_list"}]
                },
                {
                    id:3,authName:"商品维护",icon:"el-icon-shopping-bag-2",
                    children:[{id:0,authName:"商品类型",path:"admin_type_list"},{id:1,authName:"商品管理",path:"admin_product_list"}]
                },
                {
                    id:4,authName:"轮播图维护",icon:"el-icon-picture-outline",
                    children:[{id:0,authName:"轮播图管理",path:"admin_picture_list"}]
                },
                {
                    id:5,authName:"运营维护",icon:"el-icon-bell",
                    children:[{id:0,authName:"运营管理",path:"admin_operation"}]
                }
            ],
        
             options: [
                {value: '选项1',label: '技术总监'},
                {value: '选项2',label: 'UI设计师'},
                {value: '选项3',label: '项目经理'},
             ],
             value: '',
            //  被激活的链接地址
            activePath:''

        }
    },
    methods:{
        logout(){
            window.sessionStorage.clear();
            this.$router.push('/login')
        },
        // 菜单的折叠与展开
        toggleCollapse(){
            this.isCollapse = ! this.isCollapse
        },
        // 
        saveNavState(activePath){
            window.sessionStorage.setItem('activePath',activePath)
             this.activePath = activePath
        }

    },
    created(){
        this.activePath = window.sessionStorage.getItem('activePath')
       
    }
}
</script>

<style scoped>
.home_container{
    height: 100%;
}
.el-header{
    background-color: #f3f3f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
   
 }
.el-header .btn{
    margin-left: 0; 
}
.logout{
    color: #bababa;
    font-size:12px;
}
.logout i{
    color: #333;
}
.logout p,span,i{
    padding: 0 5px;
}
.logout span{
    cursor: pointer;
}


/* 侧边栏 */
.el-aside {
    background-color: #2f4050;
    /* height: 100%; */
 }

/* 侧边栏-头像区域 */
.avator{
    width: 180px;
    height: 100px;
    background:#2f4050;
    /* background: blue; */
    padding-left: 20px;
    color: #fff;
}
.avator .el-avatar{
    float: left;
    margin-top: 20px;
    /* background: pink; */
}
.login_message{
    float: left;
    width: 80px;
    height: 60px;
    /* background: pink; */
    margin-top: 20px;
    margin-left: 35px;
}
.login_message .avator_name{
    margin-top: 10px;
    font-weight:600;
}
.avator p{
    margin-top: 4px;
    font-size: 12px;
    padding-left: 5px;
    font-weight: lighter; 
} 
.postion .el-icon-caret-bottom{
    display: block;
    margin-left: 50px;
    margin-top: -12px;
}



 .el-aside i{
    margin-right: 10px;
}

.el-menu{
    border-right: none; 
}
.el-submenu .is-active {
   background:#2f4050
}
.el-submenu:active{
     background:#2f4050
}
.el-submenu{
    width: 200px;
}
.el-submenu i{
    padding-left: 15px;
}
.el-submenu .el-menu-item span{
    margin-left: 50px;
}


/* 主体内容 */
.el-main {
    background-color:#E9EEF3 ;
    color: #333;
    width: 100%;
    height: 1000px;
    padding-bottom: 500px;
}
.el-button{
    padding: 10px;
 }
  

  
</style>